import React, { Component } from "react";

export default class LifeClass extends Component {
  constructor() {
    super();
    console.log("constructor");
  }
  state = {
    count: 0,
    changeCount: (num) => {
      this.setState({
        count: this.state.count + num,
      });
    },
    changeCountForce: (num) => {
      this.state.count += num;
      this.forceUpdate();
    },
  };
  render() {
    console.log("render");
    let { count, changeCount, changeCountForce } = this.state;
    let { countParent } = this.props;
    return (
      <div>
        <h1>LifeClass</h1>
        <p>count:{count}</p>
        <p>父组件Count:{countParent}</p>
        <p>
          <button onClick={() => changeCount(1)}>
            更新触发componentDidUpdate
          </button>
        </p>
        <p>
          <button onClick={() => changeCountForce(2)}>
            强制更新触发componentDidUpdate
          </button>
        </p>
      </div>
    );
  }
  //   在组件挂载后调用，此时可以访问到DOM元素
  componentDidMount() {
    console.log("componentDidMount");
  }

  // 组件更新后调用
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate");
  }
}
